<template>
  <div class="customer-quota">
    <!-- <a-row>
      <a-col :span="12"> -->
    <div class="backToCommon">
      <c-button type="primary" ghost @click="backToCommon">
        <c-icon type="fanhui"></c-icon>返回客户列表</c-button
      >
    </div>
    <div class="tip">
      <a-alert
        class="inline-b"
        type="warning"
        message="此功能是将选中客户的指定合约月的可用额度统一修改，不管该客户是否有这个合约月，都统一将选中客户该合约月的剩余可用额度统一修改为上述输入的值。"
        show-icon
      ></a-alert>
    </div>
    <c-form
      ref="form"
      v-model="form"
      :data="formData"
      :rules="formRules"
      :col="{
        labelCol: { style: 'width:100px' },
        wrapperCol: { style: 'width:200px' }
      }"
      @submit="submit"
    >
      <template v-slot:selected>
        <div class="customers">
          <div v-if="isAll">所有客户</div>
          <div v-else>
            <span v-for="(item, idx) in companys" :key="idx"
              >{{ item.companyName }}
              <i v-if="idx !== companys.length - 1">、</i>
            </span>
          </div>
        </div>
      </template>
      <template v-slot:categoryCode>
        <c-category
          v-model="form.categoryCode"
          getItem
          @change="changeCategory"
        />
      </template>
      <template v-slot:futuresContractCode>
        <c-futures
          v-model="form.futuresContractCode"
          :futuresCode="futuresCode"
        ></c-futures>
      </template>
    </c-form>
    <!-- </a-col>
      <a-col :span="12"> -->
    <div class="historyRecord">
      <a-list
        item-layout="vertical"
        bordered
        size="small"
        :data-source="recordData.pageData"
      >
        <a-list-item slot="renderItem" slot-scope="item">
          <!-- <p class="title">
            <span>已选：</span>
            <a-tooltip
              placement="top"
              :mouseEnterDelay="0.5"
              :arrowPointAtCenter="true"
            >
              <template slot="title">
                <span>{{ item.customers }}</span>
              </template>
              <span>{{ item.customers }}</span>
            </a-tooltip>
          </p> -->
          <div class="content">
            <!-- 关于合约月
            <span class="primary fontw">{{ item.contract }}</span>
            的剩余可用额度统一修改为
            <span
              class="fontw"
              :class="[item.num === 0 ? 'danger' : 'success']"
              >{{ item.num }}</span
            >
            吨 -->
            <div>{{ item.remark }}</div>
          </div>
          <template slot="actions">
            <!-- <span>
              <span> <a-icon type="user" /> 操作人：</span>
              <span>{{ item.user }}</span>
            </span> -->
            <span>
              <a-icon type="calendar" /> {{ $getTime(item.createDate) }}</span
            >
          </template>
        </a-list-item>
        <div class="historyRecord-title" slot="header">
          <c-icon type="time" />
          <span>历史记录</span>
        </div>
      </a-list>
    </div>
    <!-- 重大操作确认弹窗 -->
    <c-modal
      v-model="confirmVisible"
      title="重大操作确认"
      @ok="submitConfirm"
      @cancel="passWord = undefined"
      width="300px"
    >
      <p>是否确认进行当前操作，若确认，请输入本账号密码，提交成功即生效</p>
      <a-input
        v-model="passWord"
        placeholder="请输入登录密码"
        type="password"
      ></a-input>
    </c-modal>
    <!-- </a-col>
    </a-row> -->
  </div>
</template>

<script>
import { getcompanycreditbatchupdatelog, updatebatchcredit } from "@/api/quota";

const formData = [
  {
    label: "已选",
    slot: "selected",
    wrapperCol: { style: "width: auto" }
  },
  {
    label: "商品品种",
    prop: "categoryCode",
    slot: "categoryCode"
  },
  {
    label: "合约月",
    prop: "futuresContractCode",
    slot: "futuresContractCode"
  },
  {
    label: "可用额度",
    prop: "availableCredit",
    type: "number",
    max: 999999
  },
  {
    label: " ",
    colon: false,
    type: "submit",
    submitText: "确认提交"
  }
];

export default {
  data() {
    return {
      confirmVisible: false,
      futuresCode: undefined,
      form: {
        categoryCode: [],
        futuresContractCode: undefined,
        availableCredit: undefined
      },
      formRules: {
        categoryCode: [
          { required: true, message: "请选择商品品种", trigger: "change" }
        ],
        futuresContractCode: [
          { required: true, message: "请选择合约月", trigger: "change" }
        ],
        availableCredit: [
          { required: true, message: "请输入可用额度", trigger: "change" }
        ]
      },
      formData,
      companys: [],
      isAll: true, // 是否全选
      pageNum: 1,
      passWord: undefined, // 登录密码
      recordData: [
        {
          date: "2020-11-04 09:56:47",
          user: "杨慧慧",
          customers: "全部客户",
          content: "关于合约月沪铜2012的剩余可用额度统一修改为1000吨",
          contract: "沪铜2012",
          num: 1000
        },
        {
          date: "2020-11-04 09:56:47",
          user: "杨慧慧",
          customers:
            "海南万科实业有限公司、海南万科实业有限公司、海南万科实业、海南万科实业有限公司、实业有限公司、海南万科实业有限公司、海南万科实业有限公司、海南万科实业有限公司、海南万科、海南万科实业有限公司、",
          content: "关于合约月沪铜2012的剩余可用额度统一修改为10吨",
          contract: "沪铜2012",
          num: 0
        },
        {
          date: "2020-11-04 09:56:47",
          user: "杨慧慧",
          customers: "全部客户",
          content: "关于合约月沪铜2012的剩余可用额度统一修改为80吨",
          contract: "沪铜2012",
          num: 80
        },
        {
          date: "2020-11-04 09:56:47",
          user: "杨慧慧",
          customers: "全部客户",
          content: "关于合约月沪铜2012的剩余可用额度统一修改为300吨",
          contract: "沪铜2012",
          num: 300
        }
      ] // 历史记录
    };
  },
  methods: {
    //   返回客户列表
    backToCommon() {
      this.$router.push({ name: "customerSelfList" });
    },
    changeCategory(val) {
      if (val.length !== 0) this.futuresCode = val[val.length - 1].futureCode;
    },
    // 操作记录
    getHistoryRecordList() {
      getcompanycreditbatchupdatelog({
        pageNum: this.pageNum,
        pageSize: 20
      }).then(res => {
        this.recordData = res;
      });
    },
    // 确认提交
    submit() {
      this.$refs.form.validated().then(() => {
        this.confirmVisible = true;
      });
    },
    // 重大操作弹窗确认
    submitConfirm() {
      let companyIds = this.isAll
        ? undefined
        : this.companys.map(i => i.companyId);
      updatebatchcredit({
        password: this.passWord,
        futuresContractCode: this.form.futuresContractCode,
        categoryId: this.form.categoryCode[this.form.categoryCode.length - 1],
        creditAmount: this.form.availableCredit,
        type: this.isAll ? 0 : 1,
        businessDirection: 1,
        companyIds: companyIds
      }).then(() => {
        this.$message.success("操作成功");
        this.backToCommon();
      });
    }
  },
  created() {
    let companys = this.$storage.s_get("batchUpdateQuota");
    if (companys === "all") {
      this.isAll = true;
    } else {
      this.isAll = false;
      this.companys = companys;
    }
    this.getHistoryRecordList();
  },
  beforeDestroy() {
    this.$storage.s_remove("batchUpdateQuota");
  }
};
</script>

<style lang="scss" scoped>
.ant-col:first-child {
  padding-right: 20px;
}
.tip {
  margin: 24px 0;
}
.customers {
  max-height: 400px;
  overflow: auto;
}
.historyRecord {
  max-width: 1000px;
  ::v-deep .ant-list-header {
    font-weight: bold;
    font-size: 16px;
  }
  .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .historyRecord-title {
    padding-left: 8px;
  }
  .ant-list-items {
    .ant-list-item {
      margin: 0 14px;
      padding: 8px;
    }
  }
}
</style>
